<!-- 顶部导航栏 -->
<template>
	<el-menu :default-active="props.activeIndex" mode="horizontal" @select="handleSelect">
		<el-menu-item index="1">问诊队列</el-menu-item>
		<el-menu-item index="2">基本信息</el-menu-item>
		<el-menu-item index="3">门诊病历</el-menu-item>
		<el-menu-item index="4">电子处方</el-menu-item>
		<el-menu-item index="5">检查检验单</el-menu-item>
	</el-menu>
</template>

<script lang="ts" setup>
	import { ref, defineProps, onMounted, onUnmounted } from 'vue';
	import Emessage from '@/Utils/Message';

	const props = defineProps<{
		activeIndex : string;
		beforeLeavePage ?: Function;
	}>();

	const urls = {
		'1': '/pages/doctor/queue',
		'2': '/pages/doctor/patient',
		'3': '/pages/doctor/diagnosis',
		'4': '/pages/doctor/prescription',
		'5': '/pages/doctor/checkup',
	};
	
	let navigationIndex = null;
	
	const navigate = () => {
		uni.redirectTo({
			url: urls[navigationIndex],
			success: res => { },
			fail: () => {
				Emessage("TODO: 页面" + urls[navigationIndex], "error");
			},
			complete: () => { }
		});
	}

	const handleSelect = (key : string, keyPath : string[]) => {
		navigationIndex = key;
		if (props.beforeLeavePage) {
			if (props.beforeLeavePage()) {
				return;
			}
		}
		navigate()
	};

	const handleBeforeUnload = (e) => {
		if (props.beforeLeavePage) {
			if (props.beforeLeavePage()) {
				e.returnValue = '您确定要离开此页面吗？所有未保存的更改将会丢失。';
				return e.returnValue;
			}
		}
	};

	const resumeNavigation = () => {
		navigate();
	}

	defineExpose({
		resumeNavigation,
	});

	onMounted(() => {
		if (props.beforeLeavePage) {
			window.addEventListener('beforeunload', handleBeforeUnload);
		}
	});

	onUnmounted(() => {
		if (props.beforeLeavePage) {
			window.removeEventListener('beforeunload', handleBeforeUnload);
		}
	});
</script>

<style scoped>

</style>